import React from 'react';
import { PaperClipOutlined, DownloadOutlined } from '@ant-design/icons';
import { Space, Typography } from 'antd';
import API from '@/api';
const { Text } = Typography;
function FileLists({ fileList, downloadUrl }) {
  const downloadFn = (item) => {
    const params = {
      fileName: item.fileName,
      originalFileName: item.originalFileName,
    };
    API.downloadFn(downloadUrl, params);
  };
  const EllipsisMiddle = ({ children }) => {
    const index = children.lastIndexOf('.');
    const start = children.slice(0, index).trim();
    const suffix = children.substr(index);
    return <Text ellipsis={{ suffix }}>{start}</Text>;
  };

  return (
    <div className="fileList-x">
      {fileList
        ? fileList.map((x) =>
            downloadUrl ? (
              <div
                className="item"
                key={x.id}
                onClick={downloadFn.bind(null, x)}
              >
                <Space className="item-x">
                  <PaperClipOutlined />
                  <Space className="flex1">
                    <EllipsisMiddle>{x.originalFileName}</EllipsisMiddle>
                    <DownloadOutlined className="down-x" />
                  </Space>
                </Space>
              </div>
            ) : (
              <div className="item" key={x.id}>
                <Space className="item-x">
                  <PaperClipOutlined />
                  <a href={x.url} download target="_blank">
                    <Space className="flex1">
                      <EllipsisMiddle>{x.originalFileName}</EllipsisMiddle>
                      <DownloadOutlined className="down-x" />
                    </Space>
                  </a>
                </Space>
              </div>
            ),
          )
        : '无'}
    </div>
  );
}

export default FileLists;
